<template>
	<view>
		<u-swiper :list="data.banner" keyName="thumb" height="22.5vh" />
		<view class="addUserInfo" @click="targetBasicInfo">
			<view v-if="!appUserInfo" class="else">
				<image src="https://new.kuxia.top/uploads/image/20220930/1ed59b4e588e39d0554669eb36dfad72.png" />
				<text>完善用户信息</text>
			</view>
			<view v-if="appUserInfo" class="if">
				<view>{{ appUserInfo.name }}</view>
				<view>
					<view>{{ appUserInfo.tel }}</view>
					<view>
						<text>详情</text>
						<image
							src="https://new.kuxia.top/uploads/image/20220930/42db1de5be8eddef523c822197a648fa.png" />
					</view>
				</view>
			</view>
		</view>
		<image :src="data.info.thumb" class="thumb" @click="targetHospitalIntr" />
		<u-tabs :list="data.tabsList" :scrollable="false" activeStyle="color:#1677ff" :current="data.tabsIndex"
			@change="tabsChange" />

		<view class="tab" v-show="data.tabsIndex === 0">
			<view @click="targetReserve">
				<image class="blue"
					src="https://new.kuxia.top/uploads/image/20220930/f0f72b60cea2ac6314a781d19832983a.png" />
				<text>患者预约</text>
			</view>
			<view @click="targetBasicInfo">
				<image class="blue"
					src="https://new.kuxia.top/uploads/image/20220930/4d7839e5410af88e759de6953ca7af3a.png" />
				<text>患者登记</text>
			</view>
			<view @click="targetInformationList">
				<image class="blue"
					src="https://new.kuxia.top/uploads/image/20220930/4c6d673bf669ceba69878b8fcbbcc965.png" />
				<text>医疗宣传</text>
			</view>
			<view @click="targetHistory">
				<image class="blue"
					src="https://new.kuxia.top/uploads/image/20220930/2de6ad961dc5002310745f42a7e520d7.png" />
				<text>住院记录</text>
			</view>
		</view>

		<view class="tab" v-show="data.tabsIndex === 1">
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>住院清单</text>
			</view>
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>住院押金</text>
			</view>
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>住院记录</text>
			</view>
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>办理入院</text>
			</view>
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>出院结算</text>
			</view>
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>电子住院证</text>
			</view>
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>电子发票</text>
			</view>
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>手术进度查询</text>
			</view>
		</view>

		<view class="tab" v-show="data.tabsIndex === 2">
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>医保服务</text>
			</view>
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>特色门诊</text>
			</view>
			<view>
				<image class="green"
					src="https://new.kuxia.top/uploads/image/20221018/d72691eaa054cf194f7cdb7e0f5516da.png" />
				<text>科室分布</text>
			</view>
		</view>

		<view class="double">
			<view @click="targetHospitalIntr">
				<image src="https://new.kuxia.top/uploads/image/20220930/f0f72b60cea2ac6314a781d19832983a.png" />
				<text>医院介绍</text>
			</view>
			<view @click="targetDepartmentList">
				<image src="https://new.kuxia.top/uploads/image/20220930/f0f72b60cea2ac6314a781d19832983a.png" />
				<text>科室介绍</text>
			</view>
			<view @click="targetDoctorIndex">
				<image src="https://new.kuxia.top/uploads/image/20220930/f0f72b60cea2ac6314a781d19832983a.png" />
				<text>医生介绍</text>
			</view>
			<view @click="targetMap">
				<image src="https://new.kuxia.top/uploads/image/20220930/f0f72b60cea2ac6314a781d19832983a.png" />
				<text>医院位置</text>
			</view>
		</view>
		<u-overlay :show="loading">
			<view style="height:100%;display:grid;place-content:center;">
				<u-loading-icon text="加载中..." textSize="18" color="#fff" textColor="#fff" :vertical="true">
				</u-loading-icon>
			</view>
		</u-overlay>

	</view>
</template>

<script>
const App = getApp();
import {
	index,
	getUserInfo
} from '@/request/index.js'
import baseUrl from '@/request/baseUrl.js'
export default {
	data() {
		return {
			data: ``,
			loading: false,
			appUserInfo: '',
		}
	},
	onShow() {
		this.getAppUserInfo();
	},
	onLoad() {
		this.request();

	},
	methods: {
		request() {
			index().then(res => {
				console.log(res);
				this.data = Object.assign({
					banner: res.data.banner,
					info: res.data.info,
					tabsList: [{
						name: '门诊服务'
					},
					{
						name: '住院服务'
					},
					{
						name: '便民服务'
					},
					],
					tabsIndex: 0,
				});
				this.data.info.thumb = baseUrl + this.data.info.thumb;
			});
		},
		getAppUserInfo() {
			getUserInfo({
				uid: uni.getStorageSync('userid'),
			}).then(res => {
				console.log(res.data);
				if (res.data.status) {
					this.appUserInfo = res.data.info;
				}
			})
		},
		tabsChange(event) {
			this.data.tabsIndex = event.index;
			console.log(this.data.tabsIndex);
		},
		targetBasicInfo() {
			this.globalAutr(() => {
				uni.navigateTo({
					url: '/pages/basicInfo/index'
				})
			})
		},
		targetReserve() {
			this.globalAutr(() => {
				uni.navigateTo({
					url: '/pages/reserve/index?video=' + baseUrl + this.data.info.video
				})
			})
		},
		targetHospitalIntr() {
			this.globalAutr(() => {
				uni.setStorageSync('hospitalIntr', this.data.info)
				uni.navigateTo({
					url: `/pages/hospitalIntr/index`,
				})
			})
		},
		targetDepartmentList() {
			this.globalAutr(() => {
				uni.navigateTo({
					url: `/pages/departmentList/index`,
				})
			})
		},
		targetDoctorIndex() {
			this.globalAutr(() => {
				uni.navigateTo({
					url: '/pages/doctorIndex/index'
				})
			})
		},
		targetInformationList() {
			this.globalAutr(() => {
				uni.navigateTo({
					url: '/pages/informationList/index'
				})
			})
		},
		targetMap() {
			this.globalAutr(() => {
				uni.navigateTo({
					url: '/pages/map/index'
				})
			})
		},
		targetHistory() {
			this.globalAutr(() => {
				uni.navigateTo({
					url: '/pages/history/index'
				})
			})
		},
		globalAutr(resolve, reject = () => { }) {
			App.autr(() => {
				resolve()
			}, () => {
				reject()
			}, (loadingStatus) => {
				console.log(loadingStatus);
				this.loading = loadingStatus;
			}, () => {
				this.getAppUserInfo();
			})
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 400)
			this.request();
		}, 300)
	}
}
</script>

<style lang="scss">
@mixin center {
	display: grid;
	place-content: center;
}

.addUserInfo {
	width: 90%;
	margin: 0 auto;
	height: 14vh;
	background-color: #fff;
	transform: translateY(-5vh);
	border-radius: 10px;
	box-shadow: 10px 10px 10px #f3faf9;
	display: flex;

	>.if {
		width: 100%;
		padding: 1.75vh 4.5% 1.75vh 25%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		>view {
			&:first-child {
				font-size: 22px;
			}

			&:last-child {
				display: flex;
				justify-content: space-between;

				>view:first-child {
					font-size: 14px;

					&::before {
						content: '手机号：';
						font-size: 16px;
					}

				}

				>view:last-child {
					display: flex;
					align-items: center;

					>text {
						transform: translateX(.35em);
						font-size: 16px;
					}

					>image {
						height: 80%;
						width: 1em;
					}
				}
			}
		}
	}

	>.else {
		display: flex;
		align-items: center;
		margin: auto;

		>image {
			width: 7vw;
			height: 6vw;
			margin-right: .5vw;
		}

		>text {
			font-size: 17px;
		}
	}
}

.thumb {
	width: 90%;
	margin: -2vh auto 1.5vh;
	height: 20vh;
	border-radius: 10px;
	display: block;
}

.tab {
	width: 90%;
	margin: 1.5vh auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	>view {
		@include center;
		margin: 1.5vh 0;

		>.blue,
		>.green {
			width: 47.5px;
			height: 47.5px;
			margin: 0 auto;
			padding: 10px;
			box-sizing: border-box;
			border-radius: 50%;
		}

		.blue {
			background-color: #1677ff;
		}

		.green {
			background: linear-gradient(#25dea4, #08c9cc)
		}

		>text {
			font-size: 15px;
		}
	}
}

.double {
	display: grid;
	box-sizing: border-box;
	grid-template-columns: repeat(2, 1fr);
	border-bottom: solid #e3e3e3 1px;

	>view {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		padding: 2.5vh 20%;
		box-sizing: border-box;
		border-top: solid #e3e3e3 1px;

		&:nth-child(2n) {
			border-left: solid .5px #e3e3e3;
		}

		>image {
			width: 30px;
			height: 30px;
			background-color: #1677ff;
			padding: 3px;
			box-sizing: border-box;
			border-radius: 50%;
		}
	}
}
</style>
